<route lang="yaml">
# 定义路由 meta 信息，参考 router.ts 中的注释
meta:
  requiresAuth: false
</route>

<template>
  <el-container>
    <el-header><Header></Header></el-header>
    <el-main>
      <el-card :body-style="{ padding: '0px' }">
        <el-container>
          <el-aside width="200px"
            ><el-menu
              active-text-color="#FF6666"
              background-color="#999999"
              class="el-menu-vertical-demo"
              :default-active="CurrentPage"
              text-color="#fff"
            >
              <el-menu-item index="1" @click="skipPaper('1')">
                <span>广告1</span>
              </el-menu-item>
              <el-menu-item index="2" @click="skipPaper('2')">
                <span>广告2</span>
              </el-menu-item>
              <el-menu-item index="3" @click="skipPaper('3')">
                <span>广告3</span>
              </el-menu-item>
              <el-menu-item index="4" @click="skipPaper('4')">
                <span>广告4</span>
              </el-menu-item>
              <el-menu-item index="5" @click="skipPaper('5')">
                <span>广告5</span>
              </el-menu-item>
            </el-menu></el-aside
          >
          <div class="block">
            <el-carousel
              height="400px"
              ref="viewPapersRef"
              @change="getCurrentPage"
            >
              <el-carousel-item
                v-for="item in viewPapers"
                :key="item.name"
                :name="item.name"
              >
                <img :src="item.src" alt="图片丢失了" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-container>
      </el-card>
      <Goods></Goods>
    </el-main>
    <el-footer><Footer></Footer></el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, ref } from 'vue'
import Footer from '../../components/footer.vue'
import Header from '../../components/header.vue'
import Goods from './goods.vue'

import v1 from '../../assets/img/goods/viewpager_1.jpg'
import v2 from '../../assets/img/goods/viewpager_2.jpg'
import v3 from '../../assets/img/goods/viewpager_3.jpg'
import v4 from '../../assets/img/goods/viewpager_4.jpg'
import v5 from '../../assets/img/goods/viewpager_5.jpg'
const viewPapers: any = ref([
  {
    name: '1',
    src: v1
  },
  {
    name: '2',
    src: v2
  },
  {
    name: '3',
    src: v3
  },
  {
    name: '4',
    src: v4
  },
  {
    name: '5',
    src: v5
  }
])

const viewPapersRef: any = ref(null)
const { proxy }: any = getCurrentInstance()

const skipPaper = (val: string) => {
  proxy.viewPapersRef.setActiveItem(val)
}
const CurrentPage = ref('1')
const getCurrentPage = (val: number, val2: number) => {
  CurrentPage.value = (val + 1).toString()
}
</script>

<style lang="less" scoped>
.el-header {
  padding: 0;
  background-color: white;
  position: relative;
  z-index: 999;
  box-shadow: 0px -5px 10px #1a1919;
}
.el-main {
  background-color: whitesmoke;
  position: relative;
  z-index: 1;
  padding: 0 200px;
  overflow: inherit;
  .el-card {
    margin-top: 50px;
    border-radius: 10px;
    .el-container {
      .el-aside {
        height: 400px;
        background-color: #2b333b;
        .el-menu {
          border-right-width: 0;
          .el-menu-item {
            height: 80px;
            span {
              margin-left: 10px;
            }
          }
        }
      }
      .block {
        background-color: azure;
        width: 100%;
        .el-carousel {
          img {
            width: 100%;
          }
          .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
          }

          .el-carousel__item:nth-child(2n + 1) {
            background-color: #d3dce6;
          }
        }
      }
    }
  }
}
.el-footer {
  padding: 0;
}
</style>
